<template>
  <a-modal
    title="聊天列表管理"
    :width="1600"
    :visible="visible"
    :footer="null"
    @cancel="handleCancel"
  >
    <x-card v-if="hasPerm('appChatHistory:getByOwnTxCodePage')">
    </x-card>
    <a-card :bordered="false" >
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :alert="false"
        :rowKey="(record) => record.id"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="$refs.chatHistoryIndex.open(record)">查看</a>
        </span>
      </s-table>
      <chatHistory ref="chatHistoryIndex" @ok="handleOk" />
    </a-card>
  </a-modal>
</template>
<script>
  import { STable, XCard } from '@/components'
  import { getByOwnTxCodePage } from '@/api/modular/app/chat/appChatHistoryManage'
  import chatHistory from './chatHistory.vue'
  export default {
    components: {
      XCard,
      STable,
      chatHistory
    },
    data () {
      return {
        // 查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '发送方',
            dataIndex: 'sendTxCode'
          },
          {
            title: '发送方姓名',
            dataIndex: 'sendLoginName'
          },
          {
            title: '发送方昵称',
            dataIndex: 'sendNick'
          },
          {
            title: '接收方',
            dataIndex: 'receiveTxCode'
          },
          {
            title: '接收方姓名',
            dataIndex: 'receiveLoginName'
          },
          {
            title: '接收方昵称',
            dataIndex: 'receiveNick'
          },
          {
            title: '最后聊天时间时间',
            dataIndex: 'createTime'
          }
        ],
        visible: false,
        sendTxCode: '',
        receiveTxCode: '',
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          this.queryParam.sendTxCode = this.sendTxCode
          return getByOwnTxCodePage(Object.assign(parameter, this.queryParam)).then((res) => {
            return res.data
          })
        }
      }
    },
    created () {
        this.columns.push({
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        })
    },
    methods: {
      // 打开此页面首先加载此方法
      index (record) {
        this.visible = true
        this.sendTxCode = record.txCode
        try {
          this.$refs.table.refresh()
        } catch (e) {
          // 首次进入界面，因表格加载顺序，会抛异常，我们不予理会
        }
      },
      handleOk () {
        this.$refs.table.refresh()
      },
      handleCancel () {
        this.visible = false
      }
    }
  }
</script>
<style lang="less">
  .table-operator {
    margin-bottom: 18px;
  }
  button {
    margin-right: 8px;
  }
</style>
